<template>
  <ed-form-field
    v-if="editable && inEdit"
    v-bind="$attrs"
    :value="value"
    @change="edit"
    @keyup.enter.native="click"
  />
  <el-button
    class="ed-table-cell-button"
    @click="click"
    v-else
  >
    <slot />
  </el-button>
</template>

<script>
import EdFormField from '../form/EdFormField'
import { pick } from '../../store/Form'
export default {
  props: {
    col: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: [String, Number, Boolean],
      default: null
    }
  },
  data () {
    return {
      inEdit: false,
      v: this.value
    }
  },
  watch: {
    value (v) {
      this.v = v
    }
  },
  computed: {
    editable () {
      const tag = this.col.tag
      return this.col.edit && tag && pick(tag).editable !== false
    }
  },
  methods: {
    edit (v) {
      this.v = v
    },
    click () {
      if (this.inEdit) {
        this.$emit('edit', this.v)
      }
      this.inEdit = !this.inEdit
    }
  },
  components: {
    EdFormField
  }
}
</script>

<style scoped>
.ed-table-cell-button {
  width: 100%;
  height: 100%;
  border: 0;
}
</style>
